<template>
  <div id="app">
    <div class="top">
      <van-nav-bar
        title="宠物话题详情"
        left-arrow
        :border="false"
        @click-left="$router.go(-1)" />
    </div>
    <div class="cont">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in nums" :key="item.id">
          <img v-lazy="item" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="title">
        <img class="img1" src="@/assets/05-小猫.png" alt="" />
        {{ num.title }}
      </div>
      <div class="xian"></div>
      <div class="xm">
        <p>类型：</p>
        <p>{{ num.name }}</p>
      </div>
      <div class="nr">
        <span>内容:</span>
        <span>{{ num.describe }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getPT, getPetImg } from '@/api/home'
export default {
  data() {
    return {
      tid: this.$route.params.tid,
      num: [],
      title: [],
      img: [],
      nums: [],
    }
  },

  methods: {
    // 获取宠物信息
    async getPet() {
      const data = await getPT()
      this.title = data.data.message
      console.log(data)
      data.data.message.forEach(item => {
        if (item.tid == this.tid) {
          this.num.push(item)
        }
      })
      this.num = this.num[0]
      this.title = this.num.title
      // console.log('--------')
      // console.log(this.title)

      // 并发操作 获取宠物信息图片
      const dat = await getPetImg()
      this.img = dat.data.message
      dat.data.message.forEach(item => {
        console.log('12314', item)
        if (item.tid == this.tid && item.title == this.title) {
          this.nums.push(item.imgname)
        }
      })
      // this.nums = this.nums[0]
      console.log('2222', this.nums)
    },
  },
  mounted() {
    this.getPet()
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
#app p {
  margin: 0;
  padding: 0;
}
#app .cont {
  width: 300px;
  margin: auto;
  > .xian {
    margin: 10px 0;
    height: 3px;
    background-color: #e3dddd;
  }

  > img {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    margin-top: 20px;
  }
  > .title {
    width: 300px;
    line-height: 30px;
    // background-color: #fce89d;
    // color: white;
    border-radius: 10px;
    font-size: 21px;
    // font-weight: bold;
    text-shadow: 2px 2px #fad14c;
    color: #9d8837;
    > .img1 {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
  }
  > .xm {
    > p:first-child {
      font-size: 17px;
      font-weight: bold;
    }
    > p:last-child {
      font-size: 20px;

      color: gray;
      height: 40px;
    }
  }
  > .nr {
    padding: 10px 0;
    font-size: 17px;
    font-weight: bold;
    > span:first-child {
      display: inline-block;
      padding: 0 2px;
    }
    > span:last-child {
      display: block;
      font-size: 17px;
      color: gray;
    }
  }
}
.cont .van-swipe {
  width: 300px;
  height: 200px;
  border-radius: 15px;
  margin-top: 20px;
}
.van-swipe img {
  width: 300px;
  height: 200px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
</style>
